<template>
	<view class="promotion-list-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="header-left" @click="goBack">
				<text class="back-icon">‹</text>
			</view>
			<view class="header-title">{{$t('promotionList.myPromotions')}}</view>
			<view class="header-right"></view>
		</view>

		<!-- 统计卡片 -->
		<view class="stats-card">
			<view class="stat-item">
				<view class="stat-value">{{totalPromotions}}</view>
				<view class="stat-label">{{$t('promotionList.totalPromotions')}}</view>
			</view>
			<view class="stat-item">
				<view class="stat-value">{{totalViews}}</view>
				<view class="stat-label">{{$t('promotionList.totalViews')}}</view>
			</view>
			<view class="stat-item">
				<view class="stat-value">${{totalEarnings}}</view>
				<view class="stat-label">{{$t('promotionList.totalEarnings')}}</view>
			</view>
		</view>

		<!-- 筛选标签 -->
		<view class="filter-tabs">
			<view 
				class="filter-tab" 
				:class="{ active: activeFilter === 'all' }"
				@click="switchFilter('all')"
			>
				{{$t('promotionList.all')}}
			</view>
			<view 
				class="filter-tab" 
				:class="{ active: activeFilter === 'active' }"
				@click="switchFilter('active')"
			>
				{{$t('promotionList.inProgress')}}
			</view>
			<view 
				class="filter-tab" 
				:class="{ active: activeFilter === 'completed' }"
				@click="switchFilter('completed')"
			>
				{{$t('promotionList.completed')}}
			</view>
		</view>

		<!-- 推广列表 -->
		<view class="promotion-list">
			<view 
				class="promotion-item" 
				v-for="(item, index) in filteredPromotions" 
				:key="index"
				@click="viewPromotionDetail(item)"
			>
				<view class="promotion-header">
					<view class="promotion-title">{{item.title}}</view>
					<view class="promotion-status" :class="item.status">{{getStatusText(item.status)}}</view>
				</view>
				
				<view class="promotion-content">
					<image class="promotion-cover" :src="item.cover" mode="aspectFill"></image>
					<view class="promotion-info">
						<view class="promotion-desc">{{item.description}}</view>
						<view class="promotion-platform">{{$t('promotionList.platform')}}: {{getPlatformName(item.platform)}}</view>
						<view class="promotion-time">{{$t('promotionList.createTime')}}: {{formatDate(item.createTime)}}</view>
					</view>
				</view>

				<view class="promotion-stats">
					<view class="stat">
						<text class="stat-label">{{$t('promotionList.views')}}</text>
						<text class="stat-value">{{item.views}}</text>
					</view>
					<view class="stat">
						<text class="stat-label">{{$t('promotionList.clicks')}}</text>
						<text class="stat-value">{{item.clicks}}</text>
					</view>
					<view class="stat">
						<text class="stat-label">{{$t('promotionList.earnings')}}</text>
						<text class="stat-value earnings">${{item.earnings}}</text>
					</view>
				</view>

				<view class="promotion-actions">
					<view class="action-btn edit-btn" @click.stop="editPromotion(item)">{{$t('promotionList.edit')}}</view>
					<view class="action-btn share-btn" @click.stop="sharePromotion(item)">{{$t('promotionList.share')}}</view>
					<view class="action-btn delete-btn" @click.stop="deletePromotion(item)">{{$t('promotionList.delete')}}</view>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view v-if="filteredPromotions.length === 0" class="empty-state">
			<view class="empty-icon">📊</view>
			<view class="empty-text">{{$t('promotionList.noPromotions')}}</view>
			<view class="empty-desc">{{$t('promotionList.createFirstPromotion')}}</view>
		</view>

		<!-- 底部操作按钮 -->
		<view class="bottom-actions">
			<view class="action-btn create-btn" @click="createNewPromotion">{{$t('promotionList.createNewPromotion')}}</view>
		</view>
	</view>
</template>

<script>
	import { languageMixin, pageTitleMixin } from '@/common/mixins.js';
	
	export default {
		mixins: [languageMixin, pageTitleMixin],
		data() {
			return {
				activeFilter: 'all',
				totalPromotions: 0,
				totalViews: 0,
				totalEarnings: 0,
				promotions: [
					{
						id: 1,
						title: '推荐：เทพบุตรบัญชีแค้น',
						description: '精彩复仇剧，不容错过的泰国神剧！',
						cover: '/static/img/agent-cover.jpg',
						platform: 'wechat',
						status: 'active',
						views: 12580,
						clicks: 3420,
						earnings: 879.25,
						createTime: '2024-01-15'
					},
					{
						id: 2,
						title: '推荐：都市情感剧',
						description: '都市情感大剧，爱情与事业的完美结合',
						cover: '/static/img/agent-cover2.jpg',
						platform: 'qq',
						status: 'completed',
						views: 8560,
						clicks: 2100,
						earnings: 456.80,
						createTime: '2024-01-10'
					}
				]
			}
		},
		computed: {
			filteredPromotions() {
				if (this.activeFilter === 'all') {
					return this.promotions;
				}
				return this.promotions.filter(item => item.status === this.activeFilter);
			}
		},
		onLoad() {
			this.loadPromotionList();
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			switchFilter(filter) {
				this.activeFilter = filter;
			},
			loadPromotionList() {
				// 加载推广列表
				uni.request({
					url: this.configs.webUrl + '/api/promotion/list',
					data: { userId: uni.getStorageSync('userinfo').id },
					success: (res) => {
						if (res.data.code === 1) {
							this.promotions = res.data.data.list || this.promotions;
							this.calculateStats();
						}
					}
				});
			},
			calculateStats() {
				this.totalPromotions = this.promotions.length;
				this.totalViews = this.promotions.reduce((sum, item) => sum + item.views, 0);
				this.totalEarnings = this.promotions.reduce((sum, item) => sum + item.earnings, 0);
			},
			getStatusText(status) {
				const statusMap = {
					active: this.$t('promotionList.inProgress'),
					completed: this.$t('promotionList.completed'),
					paused: this.$t('promotionList.paused')
				};
				return statusMap[status] || this.$t('promotionList.unknown');
			},
			getPlatformName(platform) {
				const platformMap = {
					wechat: this.$t('promotionCreate.wechat'),
					qq: this.$t('promotionCreate.qq'),
					weibo: this.$t('promotionCreate.weibo')
				};
				return platformMap[platform] || this.$t('promotionList.unknown');
			},
			formatDate(dateStr) {
				const date = new Date(dateStr);
				return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
			},
			viewPromotionDetail(item) {
				uni.navigateTo({
					url: `/pages/client/promotion/detail?id=${item.id}`
				});
			},
			editPromotion(item) {
				uni.navigateTo({
					url: `/pages/client/promotion/edit?id=${item.id}`
				});
			},
			sharePromotion(item) {
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 0,
					href: item.link,
					title: item.title,
					summary: item.description,
					imageUrl: item.cover,
					success: function (res) {
						console.log('分享成功');
					},
					fail: function (err) {
						console.log('分享失败');
					}
				});
			},
			deletePromotion(item) {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这个推广活动吗？',
					success: (res) => {
						if (res.confirm) {
							uni.request({
								url: this.configs.webUrl + '/api/promotion/delete',
								method: 'POST',
								data: { id: item.id },
								success: (res) => {
									if (res.data.code === 1) {
										uni.showToast({
											title: '删除成功',
											icon: 'success'
										});
										this.loadPromotionList();
									} else {
										uni.showToast({
											title: res.data.msg || '删除失败',
											icon: 'none'
										});
									}
								}
							});
						}
					}
				});
			},
			createNewPromotion() {
				uni.navigateTo({
					url: '/pages/client/promotion/create'
				});
			}
		}
	}
</script>

<style>
	.promotion-list-container {
		background: #000;
		min-height: 100vh;
		color: #fff;
		padding-bottom: 120upx;
	}

	/* 顶部导航栏 */
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20upx 30upx;
		padding-top: 60upx;
		background: #111;
		border-bottom: 1px solid #333;
	}

	.header-left {
		width: 60upx;
		display: flex;
		align-items: center;
	}

	.back-icon {
		font-size: 48upx;
		color: #fff;
		font-weight: bold;
	}

	.header-title {
		font-size: 32upx;
		font-weight: 600;
		color: #fff;
	}

	.header-right {
		width: 60upx;
	}

	/* 统计卡片 */
	.stats-card {
		background: #111;
		margin: 20upx;
		border-radius: 16upx;
		border: 1px solid #333;
		padding: 30upx;
		display: flex;
		justify-content: space-between;
	}

	.stat-item {
		text-align: center;
		flex: 1;
	}

	.stat-value {
		font-size: 36upx;
		font-weight: 600;
		color: #FF4444;
		margin-bottom: 8upx;
	}

	.stat-label {
		font-size: 24upx;
		color: #999;
	}

	/* 筛选标签 */
	.filter-tabs {
		display: flex;
		background: #111;
		margin: 20upx;
		border-radius: 12upx;
		border: 1px solid #333;
		overflow: hidden;
	}

	.filter-tab {
		flex: 1;
		text-align: center;
		padding: 24upx 0;
		font-size: 28upx;
		color: #999;
		transition: all 0.3s;
	}

	.filter-tab.active {
		background: #FF4444;
		color: #fff;
		font-weight: 600;
	}

	/* 推广列表 */
	.promotion-list {
		margin: 20upx;
	}

	.promotion-item {
		background: #111;
		border-radius: 16upx;
		border: 1px solid #333;
		padding: 24upx;
		margin-bottom: 20upx;
	}

	.promotion-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20upx;
	}

	.promotion-title {
		font-size: 32upx;
		font-weight: 600;
		color: #fff;
		flex: 1;
	}

	.promotion-status {
		font-size: 24upx;
		padding: 8upx 16upx;
		border-radius: 20upx;
	}

	.promotion-status.active {
		background: #4CAF50;
		color: #fff;
	}

	.promotion-status.completed {
		background: #666;
		color: #fff;
	}

	.promotion-content {
		display: flex;
		margin-bottom: 20upx;
	}

	.promotion-cover {
		width: 120upx;
		height: 120upx;
		border-radius: 12upx;
		background: #222;
		margin-right: 20upx;
	}

	.promotion-info {
		flex: 1;
	}

	.promotion-desc {
		font-size: 26upx;
		color: #ccc;
		margin-bottom: 8upx;
		line-height: 1.4;
	}

	.promotion-platform {
		font-size: 24upx;
		color: #999;
		margin-bottom: 8upx;
	}

	.promotion-time {
		font-size: 24upx;
		color: #999;
	}

	.promotion-stats {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20upx;
		padding: 16upx 0;
		border-top: 1px solid #333;
		border-bottom: 1px solid #333;
	}

	.stat {
		text-align: center;
		flex: 1;
	}

	.stat-label {
		font-size: 24upx;
		color: #999;
		margin-bottom: 4upx;
		display: block;
	}

	.stat-value {
		font-size: 28upx;
		color: #fff;
		font-weight: 600;
	}

	.stat-value.earnings {
		color: #FF4444;
	}

	.promotion-actions {
		display: flex;
		gap: 16upx;
	}

	.action-btn {
		flex: 1;
		height: 60upx;
		border-radius: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24upx;
		font-weight: 500;
	}

	.edit-btn {
		background: #2196F3;
		color: #fff;
	}

	.share-btn {
		background: #4CAF50;
		color: #fff;
	}

	.delete-btn {
		background: #F44336;
		color: #fff;
	}

	/* 空状态 */
	.empty-state {
		text-align: center;
		padding: 100upx 40upx;
	}

	.empty-icon {
		font-size: 120upx;
		margin-bottom: 20upx;
	}

	.empty-text {
		font-size: 32upx;
		color: #fff;
		margin-bottom: 12upx;
	}

	.empty-desc {
		font-size: 26upx;
		color: #999;
	}

	/* 底部操作按钮 */
	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20upx;
		background: #000;
		border-top: 1px solid #333;
	}

	.create-btn {
		width: 100%;
		height: 80upx;
		background: #FF4444;
		color: #fff;
		border-radius: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28upx;
		font-weight: 600;
	}
</style> 